<template>
	<div class="indexBgImage">
		<p class="center">
			<img
				src="http://api.qrserver.com/v1/create-qr-code/?data=https://gitee.com/github-28527096&amp;size=100x100"
				alt=""
				title=""
				@click="openNew"
			/>
		</p>	
		<ant-Input placeholder="数字字符 例如 : 123" v-model="makeStr.model" suffix="STR" />
		<p v-if="makeStr.arr.length == 0">暂无信息</p>
		<ul v-else>
			<li v-for="(item, index) of makeStr.arr">{{ item }}</li>
		</ul>
		<ant-Button type="primary" @click="goMyEc"><ant-Icon type="environment" />进入 富文本</ant-Button>
		<ant-Button type="primary" @click="goLive"><ant-Icon type="environment" />进入 直播</ant-Button>
		<ant-Button type='primary' @click="gomusic">MUSIC</ant-Button>
		<ant-Button type="danger" @click="tree">MAKE STR</ant-Button>
		<!-- 简历pdf区域 -->
		<div class="center">
			<canvas id="the-canvas" style="border: 1px solid #eee;" />
			<p class="center">
				<ant-Button type="primary" @click="changePdf(-1)" shape="circle" :loading="iconLoading">
					<ant-Icon v-show="!iconLoading" type="left" />
				</ant-Button>
				<ant-Button type="primary" @click="savePdf" :loading="iconLoading" style="margin: 0px 5px;">
					<ant-Icon v-show="!iconLoading" type="cloud-download" />
				</ant-Button>
				<ant-Button type="primary" @click="changePdf(+1)" shape="circle" :loading="iconLoading">
					<ant-Icon v-show="!iconLoading" type="right" />
				</ant-Button>
			</p>
		</div>
	</div>
</template>
<script type="text/javascript">
import busObj from 'BUS';
import { copyArr } from 'TOOL/function';
import { getCode } from 'FLY/requestArr';
import qs from 'qs';
import processData from 'process';
import str from 'TOOL/string';
import { Button, Input, Icon } from 'ant-design-vue';
let Str = new str();
import PDFJS from 'pdfjs-dist';
PDFJS.GlobalWorkerOptions.workerSrc = 'https://hllgwanwang.oss-cn-hongkong.aliyuncs.com/pdf.worker.js';
// PDFJS.GlobalWorkerOptions.workerSrc="http://localhost:3000/pdf"
// "https://hllgwanwang.oss-cn-hongkong.aliyuncs.com/index.pdf"
export default {
	name: 'index',
	data() {
		return {
			pdfUrl: '', // 这里是pdf文件地址，后台给的流文件请求地址也是可以的
			pdfDoc: null, // pdfjs 生成的对象
			pageNum: 1, //
			pageRendering: false,
			pageNumPending: null,
			scale: 0.9, // 放大倍数
			page_num: 1, // 当前页数
			page_count: 0, // 总页数
			maxscale: 2, // 最大放大倍数
			minscale: 0.8, // 最小放大倍数
			iconLoading: true,
			makeStr: {
				model: '',
				arr: []
			}
		};
	},
	components: {
		'ant-Button': Button,
		'ant-Input': Input,
		'ant-Icon': Icon
	},
	created() {
		// window.open(this.pdfUrl);
		let arr = [{a:1},{b:2},{c:3}],arr2=[];
		arr2 =  copyArr(arr);
		arr[0].a=2;
		console.log(arr,arr2,'copy');
		// this.init();
		let str = 'qweertyrttt',
			strArr = str.split(''),
			strObj = {};
		strArr.map((item, index) => {
			strObj[item] = index;
		});
		let strNum = function (s) {
			const map = {};
			var left = 0;
			return s.split('').reduce((max, v, i) => {
				left = map[v] >= left ? map[v] + 1 : left;
				map[v] = i;
				return Math.max(max, i - left + 1);
			}, 0);
		};

		let sameStr = function (strs) {
			if (strs.length === 0 || strs[0].length === 0) {
				return null;
			}
			let fristStrArr = strs[0].split('');
			// fristStrArr.map((stritem, strindex) => {
			// 	strs.map((item, index) => {
			// 		if(index==0){
			// 			continue;
			// 		}
			// 	});
			// });
			return fristStrArr;
		};
		console.log(
			Object.keys(strObj)[0],
			strArr,
			strObj,
			Symbol.keyFor(this.$Symbol),
			strNum('qweertyrttt'),
			sameStr(['qqe', 'qqw', 'ass']),
			'leecode'
		);
	},
	computed: {
		ctx() {
			const id = document.getElementById('the-canvas');
			return id.getContext('2d');
		}
	},
	mounted() {},
	methods: {
		changePdf(e) {
			let _const = this,
				presetPage = _const['pageNum'] + e;
			if (0 < presetPage && presetPage < _const.page_count + 1) {
				_const['pageNum'] = presetPage;
				this.renderPage(this.pageNum);
			}
		},
		savePdf() {
			let _const = this;
			_const.$notification.warn({
				message: '功能完善ing',
				duration: 2,
				description: '下载功能正在完善中',
				onClick: () => {
					console.log('Notification Clicked!');
				}
			});
			// _const.ctx.save();
		},
		tree() {
			let userStr;
			if (this.makeStr.model != '') {
				userStr = this.makeStr.model;
			} else {
				userStr = '123456';
			}
			let arr = Str.aa(userStr);
			this.makeStr.arr = arr;
		},
		goMyEc() {
			this.$router.push({
				path: '/MyEc'
			});
		},
		goLive() {
			this.$router.push({
				path: '/videoLive'
			});
		},
		gomusic(){
			this.$router.push({
				path: '/music'
			});
		},
		openNew() {
			window.open('https://gitee.com/github-28527096');
		},
		init() {
			let _this = this;
			// 初始化pdf
			let loadingTask = PDFJS.getDocument(_this.pdfUrl);
			loadingTask.promise.then((pdfDoc_) => {
				_this.pdfDoc = pdfDoc_;
				_this.page_count = _this.pdfDoc.numPages;
				_this.renderPage(_this.pageNum);
			});
		},
		renderPage(num) {
			// 渲染pdf
			const vm = this;
			vm.iconLoading = true;
			this.pageRendering = true;
			const canvas = document.getElementById('the-canvas');
			// Using promise to fetch the page
			this.pdfDoc.getPage(num).then(function (page) {
				var viewport = page.getViewport({ scale: vm.scale });
				// alert(vm.canvas.height)
				canvas.height = viewport.height;
				vm.pdfWidth = canvas.width = viewport.width;
				// Render PDF page into canvas context
				var renderContext = {
					canvasContext: vm.ctx,
					viewport: viewport
				};
				var renderTask = page.render(renderContext);
				// Wait for rendering to finish
				renderTask.promise.then(function () {
					vm.pageRendering = false;
					if (vm.pageNumPending !== null) {
						// New page rendering is pending
						vm.renderPage(vm.pageNumPending);
						vm.pageNumPending = null;
					}
					vm.iconLoading = false;
				});
			});
			vm.page_num = vm.pageNum;
		}
	}
};
</script>
<style lang="scss" scoped>
.indexBgImage {
	background-size: cover;
}
.center {
	text-align: center;
}
</style>
